<template>
	<view class="pagesContent">
		<view class="pagesContentView">
			<view class="navstatus"> </view>
			<view class="hrader">个人中心 </view>
			<view class="top">
				<view class="left">
					<image class="icon" src="../../static/images/userphoto.png" mode=""></image>
				</view>
				<view class="right">
					<view class="user">
						<view class="name">{{ userInfo.nickname || '--' }}</view>
						<view class="vipClass" v-if="!userInfo.is_visitor"> 用户:{{ userInfo.username | sliceMobile  }}
						</view>
						<view class="vipClass" v-else> ID:{{ deviceId  | sliceDeviceId }}</view>
					</view>
				</view>
			</view>
			<view class="vips_nohave">
				<view class="left">
					<image class="icon" src="../../static/images/vipsIconLeft.png" mode=""></image>
					<view class="message">会员活动优惠价现已开启</view>
				</view>
				<view class="right">
					<view class="btn" @click="goPage('/pages/user/member')">立即购买</view>
				</view>
			</view>
		</view>
		<view class="foo">
			<view class="lisrView">
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index" @click="goPage(item.href)"
						:class="{lastCss :index == 5} ">
						<view class="left">
							<image class="icon" :src="item.icon" mode=""></image>
						</view>
						<view class="right">
							<view class="name">{{ item.title }}</view>
							<image class="icon" src="../../static/images/right.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="clear" style="height: 38.46rpx;"> </view>
			<adView></adView>
			<view class="" style="height: 113.46rpx;"> </view>
		</view>
	</view>

</template>
<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				list: [{
						icon: "../../static/images/userList_icon_0.png",
						href: "/pages/user/idea",
						title: "意见反馈"
					},
					{
						icon: "../../static/images/userList_icon_1.png",
						href: "/pages/user/server",
						title: "在线客服"
					},

					{
						icon: "../../static/images/userList_icon_2.png",
						href: "/pages/user/agreement?type=1",
						title: "用户协议"
					},
					{
						icon: "../../static/images/userList_icon_3.png",
						href: "/pages/user/agreement?type=2",
						title: "隐私协议"
					},
					{
						icon: "../../static/images/userList_icon_4.png",
						href: "/pages/user/agreement?type=3",
						title: "会员协议"
					},

					{
						icon: "../../static/images/userList_icon_5.png",
						href: "/pages/user/setAll",
						title: "更多设置"
					},




				]

			}
		},
		onShow() {
			uni.setStorageSync("showExportBtn", false) //隐藏预览页面中，导出按钮
			if (!this.hasLogin) {
				this.goReLaunch("/pages/user/login")
			} else {
				this.commitGetUserInfo()
			}
		},
		computed: {
			...mapGetters(["userInfo", "hasLogin", "deviceId"])
		},
		methods: {
			...mapActions(["commitGetUserInfo"])
		}
	}
</script>

<style>
	page {
		background: #F4F7FF;
	}
</style>

<style scoped lang="scss">
	.pagesContentView {
		width: 100%;
		height: 705.77rpx;
		background: url(../../static/images/userBg.png) top center no-repeat;
		background-size: 100% 705.77rpx;

		.hrader {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 38.46rpx;
			font-weight: 800;
			color: #000000;
			margin-bottom: calc(128px - var(--status-bar-height) - 58px);

		}

		.top {
			height: 115.38rpx;
			margin-bottom: 69.23rpx;

			.left {
				float: left;
				width: 115.38rpx;
				height: 115.38rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 30rpx 0 44rpx;
				position: relative;

				.icon {
					width: 115.38rpx;
					height: 115.38rpx;
					display: block;
				}

			}

			.right {
				float: left;
				height: 130rpx;

				.user {
					padding-top: 11.54rpx;
					position: relative;

					.name {
						height: 46.15rpx;
						line-height: 46.15rpx;
						font-size: 32.69rpx;
						font-weight: 600;
						color: #303030;
						margin-bottom: 9.62rpx;
					}

					.vipClass {
						height: 46.15rpx;
						font-size: 46.15rpx;
						color: #606060;
						font-size: 32.69rpx;


					}


				}
			}
		}

		.vips_nohave {
			margin: 0 auto;
			z-index: 10;
			width: 673.08rpx;
			height: 230.77rpx;
			background: url(../../static/images/vipsIconBg.png) center center no-repeat;
			background-size: 100% 100%;



			.left {
				float: left;
				padding: 38.46rpx 0 0 48.08rpx;


				.icon {
					width: 307.69rpx;
					height: 53.85rpx;
					display: block;
					margin-bottom: 7.69rpx;
				}

				.message {
					height: 38.46rpx;
					font-size: 26.92rpx;
					font-weight: 400;
					color: #F3E1C4;
					line-height: 38.46rpx;
				}


			}

			.right {
				float: right;
				padding-top: 61.54rpx;
				padding-right: 26.92rpx;

				.btn {
					width: 190.38rpx;
					height: 61.54rpx;
					line-height: 61.54rpx;
					background: linear-gradient(135deg, #FFD88A 0%, #FFEEBE 100%);
					border-radius: 34.62rpx;
					text-align: center;
					font-size: 23.08rpx;
					font-weight: 600;
					color: #56390E;
				}
			}
		}



	}

	.foo {



		.lisrView {
			border-radius: 30.77rpx 30.77rpx 0 0;
			background: #F4F7FF;
			position: fixed;
			top: 600rpx;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 20;
			overflow-y: auto;
			padding-top: 48.08rpx;



			.list {
				margin: 0 auto;
				width: 611.54upx;
				background: #FFFFFF;
				padding: 0 30.77rpx;
				border-radius: 30.77rpx;

				.item {
					height: 105.77rpx;
					display: flex;

					.left {
						float: left;
						height: 105.77rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							width: 46.15rpx;
							height: 46.15rpx;
						}
					}

					.right {
						flex: 1;
						height: 105.77rpx;
						border-bottom: 1.92rpx solid #E5E5EC;
						padding-left: 23.08rpx;

						.name {
							float: left;
							height: 105.77rpx;
							line-height: 105.77rpx;
							font-size: 30.77rpx;
							font-weight: 600;
							color: #303030;
						}

						.icon {
							float: right;
							width: 30.77rpx;
							height: 30.77rpx;
							margin-top: 33rpx;

						}
					}
				}

				.lastCss {
					.right {
						border-bottom: 0;
					}
				}

			}

		}

	}
</style>